<template>
  <div class="inventoryReport">
    <!-- 出库排行榜 -->
    <div class="warehouse">
      <div class="warehouse-area">
        <div ref="ware" style="width: 800px; height: 280px;"></div>
      </div>
    </div>
    <!-- 盘点排行 -->
    <div class="inventory-ranking">
      <div class="ranking-head">
        <div class="title"></div>
        <div class="operation"></div>
      </div>
      <div class="ranking-area">
        <div ref="rankChart" style="width: 800px;height:280px;"></div>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, ref, inject, onMounted } from '@vue/runtime-core'

export default defineComponent({
  name: 'InventoryReport',
  setup() {
    const rankChart = ref<HTMLElement>()
    let echarts: any = inject("echart");
    const ware = ref<HTMLElement>()

    onMounted(() => {
      let myChart = echarts.init(rankChart.value);
      myChart.setOption({
        color: ['#11b9d0', '#409eff'],
        title: {
            text: '盘点排行'
        },
        tooltip: {},
        legend: {
            bottom: 10,
            data: ['益', '损']
        },
        series:[
          { 
            type: 'bar',
            name: '益',
            data: [120, 20, 150, 80, 70, 110, 130],
          },
          { 
            type: 'bar',
            name: '损',
            data: [10, 20, 15, 8, 7, 11, 13],
          }
        ],
        xAxis: {
          type: 'category',
          data: ['广州路仓库', '南京路仓库', '上海路仓库', '北京路仓库', '福州路仓库']
        },
        yAxis: {
          type: 'value'
        },
        dataset:{
          source:[]
        }
      })


      let wareChart = echarts.init(ware.value)
      wareChart.setOption({
        color: ['#409eff'],
        title: {
            text: '出库排行榜'
        },
        tooltip: {},
        legend: {},
        series:[
          { 
            type: 'bar',
            // name: '益',
            data: [120, 20, 150, 80],
          }
        ],
        xAxis: {
          type: 'value',
        },
        yAxis: {
          type: 'category',
          data: ['面膜', '防护面膜套装', '领键保护膜', '防护面罩']
        },
        dataset:{
          source:[]
        }
      })
    })

    return {
      rankChart,
      ware
    }
  }
})
</script>

<style lang="scss" scoped>
.inventoryReport {
  .warehouse {
    width: 100%;
    height: 320px;
    background: white;
    border-radius: $radius-2;
    box-shadow: 0 0 2px #e9e9e9;
    margin-bottom: 15px;
    .warehouse-area {
      padding: 20px;
    }
  }

  .inventory-ranking {
    width: 100%;
    height: 320px;
    background: white;
    border-radius: $radius-2;
    box-shadow: 0 0 2px #e9e9e9;

    .ranking-area {
      padding: 20px;
    }
  }
}
</style>